import QtQuick 2.0

Item {

    id: root

    // public =====================================================================
    property color proColor: "#1677FF"
    property color bcgColor: "#D2FDFE"
    property real percentage: 0.5

    function start(){
        isStart = true
        timer.start()
    }function stop(){
        isStart = false
        timer.stop()
    }
    property bool initCanvas: false

    // private ===================================================================

    property int  sampleCnt: 60     // 采样点数
    property int  tick: 0
    property int  waveX: 18*dp
    property int  waveY: 7*dp
    property bool isStart: false

    onVisibleChanged: {
        if(visible){
            if(isStart){
                timer.start()
            }
        }else{
            timer.stop()
        }
    }

    Timer{
        id:timer
        interval: 50
        repeat: true
        onTriggered: {
            tick = ((tick+1) % 1000)
            canvas.requestPaint()
        }
    }

    // 样式 =======================================================================
    height: 200*dp
    width: 200*dp
    Canvas{
        id: canvas
        anchors.fill: parent
        onPaint: {


            var ctx = canvas.getContext("2d")
            var r = Math.min(width/2, height/2) - 5
            var d = r*2
            if(!initCanvas){

                ctx.translate(width/2, height/2)
                initCanvas = true
            }

            ctx.clearRect(-r, -r, r, r)

            ctx.beginPath()
            ctx.fillStyle = bcgColor
            ctx.strokeStyle = proColor
            ctx.lineCap = "round"
            ctx.lineWidth = 4
            ctx.arc(0, 0, r, 0, 2*Math.PI)
            ctx.stroke()
            ctx.fill()
            ctx.closePath()
            ctx.clip()


            ctx.beginPath()
            var y = r - percentage*d
            ctx.moveTo(-r, y)
            for(var i = 0; i < sampleCnt; i ++){
                var tickX = i/sampleCnt*width - r
                var tickY = y + waveY*Math.sin(tickX/waveX + tick*0.3)
                ctx.lineTo(tickX, tickY)
            }
            ctx.lineTo(r, y)
            ctx.lineTo(r, r)
            ctx.lineTo(-r, r)
            ctx.lineTo(-r, y)
            ctx.closePath()
            ctx.fillStyle = "rgba(22, 119, 255, 0.2)"
            ctx.fill()

            ctx.beginPath()
            var y = r - percentage*d
            ctx.moveTo(-r, y)
            for(var i = 0; i < sampleCnt; i ++){
                var tickX = i/sampleCnt*width - r
                var tickY = y + waveY*Math.sin(tickX/waveX + tick*0.3 + waveX/1.3)
                ctx.lineTo(tickX, tickY)
            }
            ctx.lineTo(r, y)
            ctx.lineTo(r, r)
            ctx.lineTo(-r, r)
            ctx.lineTo(-r, y)
            ctx.closePath()
            ctx.fillStyle = "rgba(22, 119, 255, 0.5)"
            ctx.fill()
        }
    }


    Item{
        anchors.fill: parent
        Text{
            color: "white"
            font.pixelSize: 30*dp
            text: Math.floor(percentage * 100).toString() + "%"
            anchors.centerIn: parent
            font.bold: true
        }
    }

}
